<template>
  <div :class="`my-btn1 ${type}`">
    <!-- 
            soly:插槽组件,虚拟的占位符
            会在组件使用时,替换成起双标签中的内容
         -->
    <span>
      <slot />
    </span>
  </div>
</template>

<script>
export default {
  // 简单语法
  // props:["type"]
  // props精确配置语法
  props: {
    // 属性名:{配置项}
    type: {
      // ctrl + i 查看配置项
      default: "default",
    },
  },
};
</script>

<style lang="scss" scoped>
.my-btn1 {
  display: inline-block;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  user-select: none;
  cursor: pointer;
  margin: 5px;
  // 默认样式
  &.default {
    color: #333;
    border: 1px solid #888;
  }
  &:hover {
    opacity: 0.7;
  }
  &:active {
    opacity: 1;
  }
  &.primary {
    background-color: #419eff;
  }
  &.success {
    background-color: #69c23b;
  }
  &.info {
    background-color: #8f9399;
  }
  &.warning {
    background-color: #e4a239;
  }
  &.danger {
    background-color: #f56c6c;
  }
  opacity: 0.9;
}
</style>
